<%var csstpl = {%>
<style scoped>
    .modify{
        border:1px solid red !important;
    }
</style>
<%};%>
<%var jstpl = {%>
<script xmlns:v-on="http://www.w3.org/1999/xhtml">
    var app = new Vue({
        el: "#content",
        data: {
            query: {
                agent_id: '${agentId}'
             },
            data_result: [],
            agentProductSku:{}
        },
        created: function() {
            this.loadPage("init")
        },
        mounted() {
            let form = layui.form;
            let that = this;
            // save: function(){
            //     var  stockNum={"stockNum":this.data_result};
            //     Ajax("/system/agent/updateStockNumForm", stockNum, function(d) {
            //             alert("修改成功");
            //         },function(){
            //             alert("修改失败");
            //         }
            //     )
            // }
            form.on('submit(formDemo)', function(data) {
                console.log(data);
                Ajax('/system/agent/updateStockNumForm', data.field, function(d) {
                    if (d.state) {
                        gx.alert(d.msg);
                        that.loadPage();
                        $("#addUpdateModal").modal('hide');
                    } else {
                        gx.alert(d.msg);
                    }
                })
            })
        },
        methods: {
            loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
                if (model == "init") {
                    this.query.pageNumber = 1;
                }
                Ajax("/system/agent/accountStockNum", this.query, function(d) {
                    app.data_result = d.list;
                    if (d.firstPage == true) {
                        layui.laypage.render({
                            elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
                            ,
                            layout: ['count', 'prev', 'page', 'next',
                                'limit', 'skip'
                            ],
                            count: d.totalRow //数据总数，从服务端得到
                            ,
                            limit: app.query.pageSize,
                            jump: function (obj, first) {
                                app.query.pageNumber = obj.curr;
                                if (app.query.pageSize != obj.limit) {
                                    app.query.pageSize = obj.limit;
                                    app.loadPage("init");
                                    return;
                                }
                                if (!first) {
                                    app.loadPage("load");
                                }
                            }
                        });
                    }
                    });
             },
            updateStockNum: function(d) {
                this.agentProductSku = d;
                this.$nextTick(() => {
                    $("#updateStockNumModal").modal("show");
            });
            }
        }
    })

</script>

<%};%>
<%layout("../layout/_layout_layui.html",{title:"代理商管理",jstpl:jstpl,csstpl:csstpl}){%>
<div class="layui-row" id="content" v-cloak>
<!--    <div class="layui-col-md12" style="margin-top: 20px">-->
                <table class="layui-table" title="代理商存货管理">
                    <thead>
                    <tr>
                        <td>产品id</td>
                        <td>库存数量</td>
                        <td>销售总量</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody v-for="d in data_result">
                        <tr>
                            <td v-text="d.product_id"></td>
                            <td v-text="d.stock_num"></td>
                            <td v-text="d.sale_num"></td>
                            <td>
                                  <button  class="layui-btn layui-btn-sm" @click="updateStockNum(d);">修改</button>
                            </td>
                        </tr>
                    </tbody>

                    </tbody>
                </table>
        <fieldset id="gexin_page" class="layui-elem-field layui-field-title"></fieldset>
    <input type=button value=后退  class="layui-btn" onclick="window.history.go(-1)">

    <div class="modal fade" id="updateStockNumModal" tabindex="-1" role="dialog" aria-hidden="true">
        <form id="updateStockNumForm" class="layui-form form-horizontal ">
            <div class="modal-dialog">
                <div class="modal-content">
                     <div class="modal-body">
                        <!-- 弹出框开始  -->
                        <div class="layui-row layui-col-space15">
                            <!-- 弹出框开始  -->
                            <input type="hidden" :value="agentProductSku.id" name="id">
                            <div class="layui-form-item">
                                <label class="layui-form-label">修改库存量</label>
                                <div class="layui-input-block">
                                    <input class="layui-input" type="text" lay-verify="required" :value="agentProductSku.stock_num" 　placeholder="请输入要修改的库存数量" name="stockNum">
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

</div>

<%};%>
